import React from 'react';
import { Row, Col, Button } from 'antd';
import { Link } from 'react-router-dom';
import _ from 'lodash';
import { useTranslation } from 'react-i18next';
import './index.less';

interface Props {
  sourceMap: any;
  urlPrefix?: string;
}

export default function SourceCard(props: Props) {
  const { t } = useTranslation('datasourceManage');
  const { sourceMap, urlPrefix = 'settings' } = props;

  return (
    <Row className='settings-datasource' gutter={[16, 16]} data-oid='.p4cm4x'>
      {_.map(sourceMap, (item) => {
        return (
          <Col span={4} key={item.name} data-oid='c90q9f5'>
            <Link to={`/${urlPrefix}/add/${item.type.includes('.') ? _.toLower(item.type).split('.')[0] : _.toLower(item.type)}`} data-oid='7qn6nx7'>
              <div className='builtin-cates-grid-item' data-oid='sorlczp'>
                <img src={item.logo} width={48} height={48} alt={item.name} data-oid='2iwq_qw' />
                <div data-oid='g:14iu1'>{item.name}</div>
              </div>
            </Link>
          </Col>
        );
      })}
    </Row>
  );
}
